<template>
	<view>
		<image class="image_my" src="../../static/users/background.png" mode=""></image>
		<view class="change">
			更换封面
		</view>
		<view class="main">
			<view class="head">
				<image @click="personmsg" class="my_avatar" src="../../static/users/avtar.png" mode=""></image>
				<view class="name" @click="personmsg">
					山海未眠
				</view>

				<image class="my_sex" src="../../static/users/man.png" mode=""></image>
				<view class="id">
					ID:123659874
				</view>
				<view class="address" @click="personmsg">
					四川大学锦城学院锦江校区
				</view>

				<image class="exit" @click="showexit=true" src="../../static/users/jubao.png" mode=""></image>
				<u-action-sheet :list="listexit" border-radius="30" v-model="showexit"></u-action-sheet>

				<view class="num">
				<text @click="tiezi">	103 <text class="text1">发帖</text>   </text>
				<text @click="follow">	23 <text class="text1">关注</text>    </text>
				<text @click="fans">	1.2w <text class="text1">粉丝</text>                  </text>
				</view>


			</view>

			<view class="order" @click="zhuye">
				<view class="title_order">
					<u-section title="我的订单" :show-line="false" :bold="false" sub-title="查看全部订单"></u-section>
				</view>

				<view class="flex">
					<view class="ding" v-for="(item,index) in menu">
						<image :src="item.url" mode=""></image>
						<view>{{item.name}}</view>
					</view>
				</view>
			</view>
			
			<view class="more">
				<view class="more_msg" v-for="(res,index) in list" @click="jump(index)">
					<image :src="res.url" mode=""></image>
					<view class="name_more">{{res.name}}</view>
				</view>
			</view>
			
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				showexit:false,
				listexit:[{
					text: '退出登录'
				}
				],
				menu: [{
					url: "../../static/users/fukuan.png",
					name: "待付款"
				}, {
					url: "../../static/users/jiedan.png",
					name: "待接单"
				}, {
					url: "../../static/users/songda.png",
					name: "待发货"
				}, {
					url: "../../static/users/pingjia.png",
					name: "待评价"
				}, {
					url: "../../static/users/shouhou.png",
					name: "售后/退款"
				}]
				,
				list:[{
						url: "../../static/users/chengwei.png",
						name: "成为商家"
					}, {
						url: "../../static/users/guanyu.png",
						name: "关于我们"
					}, {
						url: "../../static/users/yinsi.png",
						name: "隐私政策"
					}, {
						url: "../../static/users/fuwu.png",
						name: "服务协议"
					}, {
						url: "../../static/users/wode.png",
						name: "我的店铺"
					}, {
						url: "../../static/users/zaixian.png",
						name: "在线客服"
					}, {
						url: "../../static/users/chuangye.png",
						name: "创业咨询中心"
					}]
			}
		},
		methods: {
        zhuye(){
			uni.navigateTo({
				url:"../my_more/main/main"
			})
		},
		tiezi(){
			uni.navigateTo({
				url:"../mypost/mypost"
			})
		},
		fans(){
			uni.navigateTo({
				url:"../fans/fans"
			})
		},
		follow(){
			uni.navigateTo({
				url:"../follow/follow"
			})
		},
		personmsg(){
			uni.navigateTo({
				url:"../personmsg/personmsg"
			})
		},
		jump(index){
			if(index==0){
				uni.navigateTo({
					url:"../becomeshop/becomeshop"
				})
			}
		}
		}
	}
</script>

<style lang="scss">
	.image_my {
		width: 750rpx;
		height: 310rpx;
	}

	.change {
		position: absolute;
		top: 193rpx;
		right: 40rpx;
		text-align: center;
		line-height: 40rpx;
		width: 120rpx;
		height: 40rpx;
		background: #000000;
		opacity: 0.3;
		border-radius: 20rpx;
		font-size: 20rpx;
		font-family: PingFang SC;
		font-weight: 300;
		color: #FFFFFF;
	}

	.main {
		position: absolute;
		top: 260rpx;
		width: 750rpx;
		height: 1198rpx;
		background: #FAFBFC;
		border-radius: 40rpx;

		.head {
			width: 750rpx;
			height: 280rpx;
			background-color: #FAFBFC;
			border-radius: 40rpx;

			.my_avatar {
				position: absolute;
				top: 36rpx;
				left: 36rpx;
				width: 138rpx;
				height: 138rpx;
			}

			.name {
				position: absolute;
				left: 204rpx;
				top: 61rpx;
				font-size: 30rpx;
				font-family: PingFang SC;
				font-weight: 500;
				color: #181818;
			}

			.my_sex {
				position: absolute;
				left: 340rpx;
				top: 63rpx;
				width: 40rpx;
				height: 40rpx;

			}

			.address {
				position: absolute;
				left: 203rpx;
				top: 110rpx;
				width: 280rpx;
				height: 40rpx;
				border: 1px solid #000000;
				border-radius: 20rpx;
				text-align: center;
				line-height: 40rpx;
				font-size: 20rpx;
				font-family: PingFang SC;
				font-weight: 400;
				color: #181818;
			}

			.id {
				position: absolute;
				top: 68rpx;
				right: 210rpx;
				font-size: 20rpx;
				font-family: PingFang SC;
				font-weight: 300;
				color: #999999;
			}

			.exit {
				position: absolute;
				right: 30rpx;
				top: 80rpx;
				width: 25rpx;
				height: 5rpx;
			}

			.num {
				position: absolute;
				top: 209rpx;
				left: 30rpx;
				padding-left: 10rpx;
				width: 550rpx;
				height: 25rpx;
				font-size: 24rpx;
				font-family: PingFang SC;
				font-weight: 500;
				color: #181818;

				.text1 {
					margin: 0 50rpx 0 10rpx;
				}
			}
		}

		.order {
			margin: 0rpx 0 0 30rpx;
			width: 690rpx;
			height: 226rpx;
			background: #FFFFFF;
			border-radius: 40rpx;
			overflow: hidden;

			.title_order {
				margin: 32rpx 0 0 35rpx;
				width: 645rpx;
				height: 25rpx;
			}

			.flex {
				margin: 40rpx 0 0 0;
				padding: 0 20rpx;
				width: 690rpx;
				height: 128rpx;
				border-radius: 40rpx;
				display: flex;
				flex-wrap: wrap;
                justify-content: space-between;
				.ding {
					width: 100rpx;

					image {
						display: block;
						margin: 20rpx auto;
						width: 44rpx;
						height: 44rpx;
					}

					view {
						// width: 65rpx;
						text-align: center;
						height: 21rpx;
						font-size: 22rpx;
						font-family: PingFang SC;
						font-weight: 300;
						color: #333333;
					}
				}
			}
		}
		.more{
			margin: 0 auto;
			width: 720rpx;
			display: flex;
			flex-wrap: wrap;
			.more_msg{
				text-align: center;
				width: 180rpx;
				height: 140rpx;
				image{
					width: 48rpx;
					height: 44rpx;
					display: block;
					margin: 40rpx auto 20rpx auto;
					.name_more{
						font-size: 22rpx;
						font-family: PingFang SC;
						font-weight: 500;
						color: #181818;
					}
				}
			}
		}


	}
</style>
